<template>
  <div class="nav-links">
    <router-link
      to="/article"
      :class="{ active: isActive1 }"
      @click="toggleActive(1)"
      >文章管理</router-link
    >
    <router-link
      to="/release"
      :class="{ active: isActive2 }"
      @click="toggleActive(2)"
      >文章发布</router-link
    >
  </div>
  <router-view></router-view>
</template>
<script setup>
import { ref } from "vue";

const isActive1 = ref(true);
const isActive2 = ref(false);

function toggleActive(index) {
  if (index === 1) {
    isActive1.value = !isActive1.value;
    isActive2.value = false;
  } else {
    isActive2.value = !isActive2.value;
    isActive1.value = false;
  }
}
</script>
<style lang="css" scoped>
.nav-links {
  display: flex;
  gap: 10px; /* Adds space between the links */
}

.nav-links a {
  padding: 10px 20px;
  background-color: #f0f0f0;
  text-decoration: none;
  color: #333;
  border-radius: 5px;
  transition: background-color 0.3s ease; /* Smooth transition for background color */
}

.nav-links a.active {
  background-color: #5cb85c; /* Color when active */
  color: white;
}

.nav-links a:hover {
  background-color: #ddd; /* Color on hover */
}
</style>
